<template>
  <panel title="登录" type="panel-primary login-panel"
         pstyle="-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .2);box-shadow: 0 0 50px rgba(0, 0, 0, .2);">
    <div slot="body">
      <div style="text-align: center;margin-bottom: 20px">
        <div class="sking-admin-logo">{{ $t("message.title") }}</div>
      </div>
      <el-form ref="form" :model="form" label-width="80px" status-icon :rules="rules" v-loading="loading"
               label-position="right">
        <el-form-item label="账号：" prop="name" :error="error">
          <el-input v-model="form.name" auto-complete="off" placeholder="账号/邮箱/手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="pass">
          <el-input v-model="form.pass" type="password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <div class="register-div">
          没有账号？
          <router-link to="/register">立即注册</router-link>
        </div>
        <div>
          <el-button type="primary" style="width: 100%;" @click="submitForm('form')" @keyup.enter="submitForm('form')">
            提交
          </el-button>
        </div>
      </el-form>
    </div>
  </panel>
</template>

<script>

  import Panel from '../components/Panel.vue'
  import util from '../utils/util'
  import {User} from '../utils/resource'
  import {validateForm, SessionStorageUtil} from '../utils/element-helper'

  export default {
    name: 'login',
    data() {
      return {
        form: {
          name: '',
          pass: '',
        },
        error: "",
        loading: false,
        rules: {
          name: [
            {required: true, message: '账号不能为空', trigger: 'blur'},
          ],
          pass: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {min: 5, max: 25, message: '密码长度在 5 到 25 位之间', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                callback();
              }, trigger: 'blur'
            }
          ],
        }
      }
    },
    created() {
      // 主页添加键盘事件,注意,不能直接在焦点事件上添加回车
      let lett = this
      document.onkeydown = () => {
        if (window.event.keyCode == 13) {
          lett.submitForm('form')
        }
      }
    },
    methods: {
      submitForm(formName) {
        validateForm(this, formName, () => this._submit(formName))
      },
      async _submit(formName) {
        this.loading = true
        let res = await User.login(this.form)
        if (res.data.success) {
          this.$router.push({path: "/dashboard"})
          let user = res.data.data
          user.pass = ''
          SessionStorageUtil.setItem("user", user)
        } else {
          this.$refs[formName].resetFields()
          this.error = null
          this.$nextTick(() => {
            this.error = util.isNull(res.data.msg) ? "账号或密码错误" : res.data.msg
          })
        }
        this.loading = false
      },
    },
    components: {
      Panel
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .login-panel {
    width: 350px;
    min-height: 400px;
    margin: 100px auto;
  }

  .register-div {
    margin: 50px 0 20px 0;
    text-align: center;
    font-size: 13px;
  }

</style>
